<template>
    <div>
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postMsg">发表内容</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,index) in cmtlist" :key="index">
                <div class="cmt-item-title"><span>第{{index+1}}楼</span> <span>用户：{{item.user_name}}</span>
                    <span>发布时间：{{item.add_time | dateFormat}}</span></div>
                <div class="cmt-item-body">{{item.content}}</div>
            </div>

        </div>

        <mt-button type="danger" size="large" plain @click="loadMore">加载更多……</mt-button>
    </div>
</template>

<script>
    import {
        Toast
    } from 'mint-ui'
    export default {
        data() {
            return {
                commentlist: [],
                page: 1,
                cmtlist: [],
                msg: ''
            }
        },
        created() {
            this.getCommentByPage();
        },
        methods: {
            async getCommentByPage() {
                const {
                    data
                } = await this.$http.get("/api/getcomments/" + this.newsid + "?pageindex=" + this.page);
                if (data.status === 0) return (this.cmtlist = this.cmtlist.concat(data.message));
            },
            loadMore() {
                //加载更多评论
                this.page++;
                this.getCommentByPage();
            },
            async postMsg() {
                if (this.msg.trim().length <= 0) return Toast('请输入内容！');
                const {data} = await this.$http.post("/api/postcomment/" + this.newsid, {
                    content: this.msg.trim()
                });
                if(data.status === 0){
                   this.cmtlist.unshift({
                       user_name:"匿名用户",
                       add_time:new Date(),
                       content:this.msg.trim()
                   });
                   this.msg=''
                }
            }
        },
        props: ["newsid"]

    }
</script>

<style scoped>
    .cmt-item-title {
        font-size: 14px;
        background-color: #ddd;
        display: flex;
        justify-content: space-between;
        padding: 5px;
        margin: 10px 0px;
    }
</style>